<template>
    <div>
            <table class=" table table-bordered">
                <tbody>
                    <tr>
                        <td>商铺名称</td>
                        <td>
                            <input type="text" v-model="info.spName" />
                        </td>

                    </tr>
                    <tr>
                        <td>业主</td>
                        <td>
                            <input type="text" v-model="info.yezhu" />
                        </td>

                    </tr>
                    <tr>
                        <td>电话</td>
                        <td>
                            <input type="text" v-model="info.phone" />
                        </td>

                    </tr>
                    <tr>
                        <td>面积</td>
                        <td>
                            <input type="text" v-model="info.mianji" />
                        </td>

                    </tr>
                    <tr>
                        <td>时间</td>
                        <td>
                            <input type="date" v-model="info.time" />
                        </td>

                    </tr>
                    <tr>
                        <td>状态</td>
                        <td>
                            <select v-model="info.state">
                             
                                <option value="ture">空闲</option>空闲
                                <option value="false">出租</option>出租
                                
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button @click="add">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
let info: any = reactive({
    id:route.query.id,
    spName: "",
  yezhu: "",
  phone: "",
  mianji: "",
  time: "",
   isdel: false,
  state: "",
});
onMounted(() => {
 fune(); 
})
const add = () => {
  if(info.spName==''){
    alert("请输入商铺名称");
    return;

  }
  if(info.yezhu==''){
    alert("请输入业主");
    return; 
  }
  if(info.phone==''){
    alert("请输入电话");
    return; 
  }
  if(info.mianji==''){
    alert("请输入面积");
    return; 
  }
  if(info.time==''){
    alert("请输入时间");
    return;
      }
  if(info.state==''){
    alert("请输入状态");
    return;
  }
  if(info.phone.length!=11){
    alert("请输入正确的手机号");
    return;
  }
 

 axios({
    url:"/api/Shop/Update",
    method:"put",
    data:info,
 })
//  .then((res)=>{
//  if(res.data==1)
//  {
//     alert("添加成功");  
//      router.push('/ShopList');
//  } 
//  else{
//     alert("添加失败");
//     return;
//  }

//  }) 
.then((res)=>{

 
    alert("修改成功");
  router.push('/ShopList');
 
})
.catch((err)=>{
    console.log(err); 
})

}
const fune = () => {
 axios({
    url:"/api/Shop/fune",
    method:"get",
    params:{id:route.query.id}
 }) 
.then((res)=>{
info.spName=res.data.spName;
info.yezhu=res.data.yezhu;
info.phone=res.data.phone;
info.mianji=res.data.mianji;
info.time=moment(res.data.time).format('YYYY-MM-DD');
info.state=res.data.state;

 
})
.catch((err)=>{
    console.log(err); 
})
}
</script>

<style scoped>

</style>